<script setup>
import { ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import TnIcon from "@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue";
import TnTitle from "@tuniao/tnui-vue3-uniapp/components/title/src/title.vue";
import { get } from "@/request/request";
import { config } from "@/config";

const id = ref("");
const tData = ref({});
const course = ref([]);

onLoad((options) => {
  id.value = options.id;
  getTeacherInfo();
});

const subject = ["语文", "数学", "英语", "物理"];

const getTeacherInfo = () => {
  get("/public_api/get_teacher/" + id.value).then((res) => {
    console.log(res);
    tData.value = res.data;
    course.value = res.data.course;
  });
};
</script>

<template>
  <view class="app">
    <view class="user_box">
      <image :src="config.baseUrl + /file/ + tData.avatar" />
      <view class="info">
        <view class="top">
          <text>{{ tData.name }}</text>
          <view class="success">
            <TnIcon
              v-if="tData.auth === 1"
              name="success"
              size="28"
              color="#5f5f5f" />
            <TnIcon v-else name="close" size="28" color="#5f5f5f" />
            <text>{{ tData.auth === 0 ? "未认证" : "已认证" }}</text>
          </view>
          <view class="sex_box">
            <TnIcon
              v-if="tData.gender === '0'"
              name="sex-female"
              size="28"
              color="#5f5f5f" />
            <TnIcon v-else name="sex-male" size="28" color="#5f5f5f" />
            <view>{{ tData.genderName }}</view>
          </view>
        </view>
        <!--        <view style="font-size: 24rpx;color:#818181">初一全科 | 教龄8年 | 已受104次课</view>-->
      </view>
    </view>
    <view class="self">
      <TnTitle title="自我评价" size="lg" />
      <view>{{ tData.evaluation }}</view>
    </view>
    <view class="region">
      <TnTitle title="授课区域/时间" size="xl" />
      <view class="time">
        <view
          >区域：
          <text v-for="item in tData.tarea">{{ item }}、{{ item }}</text>
        </view>
        <view>时间：{{ tData.day }}</view>
      </view>
    </view>
    <view class="subject">
      <TnTitle title="授课科目" size="xl" />
      <view class="grade">
        <template v-for="item in course">
          <view class="title_one">
            <text>{{ item.name }}</text>
            <view v-for="item1 in item.children" class="items">{{
              item1
            }}</view>
          </view>
        </template>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-bottom: 50rpx;

  .user_box {
    margin: 25rpx;
    width: 686rpx;
    height: 128rpx;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-radius: 24rpx;

    image {
      width: 128rpx;
      height: 128rpx;
      border-radius: 9999rpx;
    }

    .info {
      height: 100rpx;
      width: 526rpx;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .top {
        display: flex;
        align-items: center;

        text {
          font-size: 32rpx;
        }

        .success {
          width: 112rpx;
          height: 40rpx;
          margin: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #f3f3f3;
          border-radius: 6rpx;

          text {
            font-size: 20rpx;
            color: #5f5f5f;
          }
        }

        .sex_box {
          display: flex;
          width: 72rpx;
          height: 40rpx;
          background: #f3f3f3;
          align-items: center;
          justify-content: center;
          border-radius: 6rpx;
          font-size: 20rpx;
        }
      }
    }
  }

  .self {
    margin: 30rpx;
    width: 686rpx;
    height: 320rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  .region {
    width: 686rpx;
    height: 232rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .time {
      height: 160rpx;
      width: 100%;
      border: 2rpx solid #e7e7e7;
      border-radius: 12rpx;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      font-size: 28rpx;
    }
  }

  .subject {
    margin: 50rpx;
    width: 686rpx;
    height: 232rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    .grade {
      width: 100%;
      height: 160rpx;
      border: 2rpx solid #e7e7e7;
      border-radius: 12rpx;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .title_one {
        display: flex;
        align-items: center;

        .items {
          margin: 20rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #e7e7e7;
          padding: 10rpx;
          border-radius: 6rpx;
        }
      }
    }
  }
}
</style>
